<template>
	<view class="container"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove" 
		@touchend="handleTouchEnd">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="status-bar" :style="'height:' + statusBarHeight + 'px'"></view>
			<view class="nav-content">
				<text class="page-title">换班</text>
				
				<!-- 滑动提示 -->
				<view class="swipe-hint" v-if="showSwipeHint">
					<text class="hint-text">👈 左右滑动切换页面 👉</text>
				</view>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-section">
			<view class="search-box">
				<text class="search-placeholder">搜索航线、时间...</text>
			</view>
		</view>

		<!-- 筛选下拉列表 -->
		<view class="filter-section">
			<view class="filter-row">
				<view class="filter-item" @tap="showPicker('company')">
					<text class="filter-label">{{ selectedFilters.company.label }}</text>
					<uni-icons type="bottom" size="10" color="#999"></uni-icons>
				</view>
				
				<view class="filter-item" @tap="showPicker('base')">
					<text class="filter-label">{{ selectedFilters.base.label }}</text>
					<uni-icons type="bottom" size="10" color="#999"></uni-icons>
				</view>
				
				<view class="filter-item" @tap="showPicker('aircraft')">
					<text class="filter-label">{{ selectedFilters.aircraft.label }}</text>
					<uni-icons type="bottom" size="10" color="#999"></uni-icons>
				</view>
				
				<view class="filter-item" @tap="showPicker('position')">
					<text class="filter-label">{{ selectedFilters.position.label }}</text>
					<uni-icons type="bottom" size="10" color="#999"></uni-icons>
				</view>
				
				<view class="filter-item" @tap="showPicker('time')">
					<text class="filter-label">{{ selectedFilters.time.label }}</text>
					<uni-icons type="bottom" size="10" color="#999"></uni-icons>
				</view>
				
				<!-- 重置按钮 -->
				<view class="reset-btn" @tap="resetFilters">
					<text>重置</text>
				</view>
			</view>
		</view>

		<!-- 换班列表 -->
		<scroll-view class="exchange-list" scroll-y="true">
			<view class="exchange-item" 
				v-for="(item, index) in exchangeList" 
				:key="index"
				@tap="viewDetail(item)">
				<view class="item-header">
					<text class="route">{{ item.departure }} → {{ item.destination }}</text>
					<view class="status-tag" :class="item.status">
						<text>{{ item.statusText }}</text>
					</view>
				</view>
				
				<view class="item-info">
					<text class="date">{{ item.date }}</text>
					<text class="type">{{ item.type }}</text>
					<text class="position">{{ item.position }}</text>
				</view>

				<view class="item-footer">
					<text class="remarks">{{ item.remarks || '无备注' }}</text>
					<view class="stats">
						<text class="exchange-count">{{ item.exchangeCount }} 人想换</text>
						<text class="comments">{{ item.comments }} 评论</text>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore">
				<text>加载更多...</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			activeTab: 0,
			hasMore: true,
			
			// 滑动相关数据
			showSwipeHint: true,
			startX: 0,
			startY: 0,
			startTime: 0,
			
			// 过滤器数据（模拟后端提供）
			filterOptions: {
				company: [
					{ value: 'all', label: '全部' },
					{ value: 'ca', label: '中国航空' },
					{ value: 'cs', label: '南方航空' },
					{ value: 'ce', label: '东方航空' },
					{ value: 'hu', label: '海南航空' },
					{ value: 'sc', label: '四川航空' }
				],
				base: [
					{ value: 'all', label: '全部' },
					{ value: 'bjs', label: '北京首都' },
					{ value: 'sha', label: '上海虹桥' },
					{ value: 'can', label: '广州白云' },
					{ value: 'szx', label: '深圳宝安' },
					{ value: 'ctu', label: '成都双流' }
				],
				aircraft: [
					{ value: 'all', label: '全部' },
					{ value: 'a320', label: 'A320' },
					{ value: 'a321', label: 'A321' },
					{ value: 'a330', label: 'A330' },
					{ value: 'b737', label: 'B737' },
					{ value: 'b777', label: 'B777' },
					{ value: 'b787', label: 'B787' }
				],
				position: [
					{ value: 'all', label: '全部' },
					{ value: 'fa', label: 'FA' },
					{ value: 'fb', label: 'FB' },
					{ value: 'fc', label: 'FC' },
					{ value: 'fa1', label: 'FA1' },
					{ value: 'fa2', label: 'FA2' },
					{ value: 'fa3', label: 'FA3' }
				],
				time: [
					{ value: 'all', label: '全部' },
					{ value: 'today', label: '今天' },
					{ value: 'tomorrow', label: '明天' },
					{ value: 'week', label: '本周' },
					{ value: 'month', label: '本月' },
					{ value: 'custom', label: '自定义时间' }
				]
			},
			
			selectedFilters: {
				company: { value: 'all', label: '公司' },
				base: { value: 'all', label: '基地' },
				aircraft: { value: 'all', label: '机型' },
				position: { value: 'all', label: '号位' },
				time: { value: 'all', label: '时间' }
			},
			
			filterTabs: [
				{ name: '全部', value: 'all' },
				{ name: '待交换', value: 'open' },
				{ name: '协商中', value: 'pending' },
				{ name: '已完成', value: 'completed' }
			],
			
			// 原始数据
			allExchangeList: [
				{
					id: 1,
					departure: '广州',
					destination: '上海',
					status: 'open',
					statusText: '待交换',
					date: '3月15日',
					type: 'A320',
					position: 'FA',
					remarks: '单号单班，急换',
					exchangeCount: 123,
					comments: 5,
					company: 'cs', // 南方航空
					base: 'can' // 广州白云
				},
				{
					id: 2,
					departure: '北京',
					destination: '伦敦',
					status: 'pending',
					statusText: '协商中',
					date: '3月20日',
					type: 'B787',
					position: 'FB',
					remarks: '可接受换其他国际航线',
					exchangeCount: 89,
					comments: 3,
					company: 'ca', // 中国航空
					base: 'bjs' // 北京首都
				},
				{
					id: 3,
					departure: '深圳',
					destination: '东京',
					status: 'open',
					statusText: '待交换',
					date: '3月18日',
					type: 'A330',
					position: 'FC',
					remarks: '希望换国内航线',
					exchangeCount: 56,
					comments: 8,
					company: 'ce', // 东方航空
					base: 'szx' // 深圳宝安
				}
			],
			
			// 显示的列表（筛选后的结果）
			exchangeList: []
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight || 0
		
		// 初始化显示所有数据
		this.applyFilters()
	},
	onReady() {
		uni.setNavigationBarTitle({
			title: '换班'
		})
	},
	methods: {
		switchTab(index) {
			this.activeTab = index
			// 这里可以根据tab筛选数据
			console.log('切换到标签:', this.filterTabs[index].name)
		},
		viewDetail(item) {
			uni.navigateTo({
				url: `/pages/schedule/detail/detail?id=${item.id}`
			})
		},
		handleTouchStart(e) {
			const touch = e.touches[0];
			this.startX = touch.clientX || touch.pageX;
			this.startY = touch.clientY || touch.pageY;
			this.startTime = Date.now();
		},
		handleTouchMove(e) {
			// 在滑动过程中什么都不做，避免影响滚动
		},
		handleTouchEnd(e) {
			const touch = e.changedTouches[0];
			const endX = touch.clientX || touch.pageX;
			const endY = touch.clientY || touch.pageY;
			
			const deltaX = endX - this.startX;
			const deltaY = endY - this.startY;
			const duration = Date.now() - this.startTime;
			
			// 判断是否为水平滑动
			if (Math.abs(deltaY) > Math.abs(deltaX) || Math.abs(deltaX) < 50) {
				return;
			}
			
			// 判断滑动速度和距离
			const velocity = Math.abs(deltaX) / duration;
			const isValidSwipe = Math.abs(deltaX) > 80 || (velocity > 0.3 && Math.abs(deltaX) > 30);
			
			if (!isValidSwipe) return;
			
			// 隐藏提示
			this.showSwipeHint = false;
			
			// 左滑跳转到评分页面（TabBar切换）
			uni.switchTab({
				url: '/pages/score/index',
				success: () => {
					uni.showToast({
						title: '切换到评分',
						icon: 'none',
						duration: 1000
					});
				}
			});
		},
		showPicker(filterType) {
			const options = this.filterOptions[filterType];
			const itemList = options.map(item => item.label);
			
			// 定义类别名称映射
			const categoryNames = {
				company: '公司',
				base: '基地', 
				aircraft: '机型',
				position: '号位',
				time: '时间'
			};
			
			uni.showActionSheet({
				itemList: itemList,
				success: (res) => {
					const selectedOption = options[res.tapIndex];
					
					// 如果选择的是"全部"，显示类别名称；否则显示具体选项
					if (selectedOption.value === 'all') {
						this.selectedFilters[filterType] = {
							value: 'all',
							label: categoryNames[filterType]
						};
					} else {
						this.selectedFilters[filterType] = selectedOption;
					}
					
					// 触发筛选
					this.applyFilters();
					
					uni.showToast({
						title: `已选择：${selectedOption.label}`,
						icon: 'none',
						duration: 1000
					});
				},
				fail: (err) => {
					console.log('用户取消选择');
				}
			});
		},
		resetFilters() {
			// 重置所有过滤条件为"全部"
			this.selectedFilters = {
				company: { value: 'all', label: '公司' },
				base: { value: 'all', label: '基地' },
				aircraft: { value: 'all', label: '机型' },
				position: { value: 'all', label: '号位' },
				time: { value: 'all', label: '时间' }
			};
			
			// 触发筛选
			this.applyFilters();
			
			uni.showToast({
				title: '已重置所有筛选条件',
				icon: 'none',
				duration: 1000
			});
		},
		applyFilters() {
			// 应用筛选条件，这里可以调用API或本地筛选
			console.log('应用筛选条件:', this.selectedFilters);
			
			// 模拟筛选逻辑
			let filteredList = [...this.allExchangeList];
			
			// 根据公司筛选
			if (this.selectedFilters.company.value !== 'all') {
				filteredList = filteredList.filter(item => 
					item.company === this.selectedFilters.company.value
				);
			}
			
			// 根据基地筛选
			if (this.selectedFilters.base.value !== 'all') {
				filteredList = filteredList.filter(item => 
					item.base === this.selectedFilters.base.value
				);
			}
			
			// 根据机型筛选
			if (this.selectedFilters.aircraft.value !== 'all') {
				filteredList = filteredList.filter(item => 
					item.type.toLowerCase().includes(this.selectedFilters.aircraft.value.toLowerCase())
				);
			}
			
			// 根据号位筛选
			if (this.selectedFilters.position.value !== 'all') {
				filteredList = filteredList.filter(item => 
					item.position.toLowerCase() === this.selectedFilters.position.value.toLowerCase()
				);
			}
			
			// 根据时间筛选（这里简化处理，实际项目中需要更复杂的时间筛选逻辑）
			if (this.selectedFilters.time.value !== 'all') {
				// 可以根据需要添加时间筛选逻辑
				console.log('时间筛选:', this.selectedFilters.time.label);
			}
			
			// 更新显示的列表
			this.exchangeList = filteredList;
			
			console.log('筛选后的结果数量:', filteredList.length);
		}
	}
}
</script>

<style lang="scss">
$primary-color: #6c5ce7;
$text-color: #333333;
$light-text: #999999;
$bg-color: #f6f7fb;
$border-color: #eeeeee;

.container {
	background-color: $bg-color;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
}

/* 顶部导航 */
.nav-bar {
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	width: 100%;
}

.nav-content {
	padding: 20rpx 30rpx;
	text-align: center;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: $text-color;
}

/* 搜索框 */
.search-section {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	width: 100%;
	box-sizing: border-box;
}

.search-box {
	height: 80rpx;
	background-color: #f5f5f5;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	width: 100%;
	box-sizing: border-box;
}

.search-placeholder {
	color: $light-text;
	font-size: 28rpx;
}

/* 筛选下拉列表 */
.filter-section {
	padding: 15rpx 20rpx;
	background-color: #fff;
	margin: 15rpx 20rpx;
	width: calc(100% - 40rpx);
	box-sizing: border-box;
	border-radius: 8rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.filter-row {
	display: flex;
	gap: 8rpx;
	align-items: center;
	justify-content: space-between;
}

.filter-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 6rpx;
	background-color: #f8f9fa;
	border-radius: 6rpx;
	border: 1rpx solid transparent;
	transition: all 0.2s ease;
	min-height: 45rpx;
	box-sizing: border-box;
	min-width: 0; /* 允许弹性收缩 */
	
	&:active {
		background-color: #e9ecef;
		border-color: $primary-color;
	}
}

.filter-label {
	flex: 1;
	font-size: 20rpx;
	color: $text-color;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 3rpx;
	text-align: center;
	line-height: 1.2;
}

.reset-btn {
	padding: 10rpx 6rpx;
	font-size: 20rpx;
	color: #fff;
	background-color: $primary-color;
	border-radius: 6rpx;
	text-align: center;
	width: 50rpx;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
	
	&:active {
		background-color: #5a4fcf;
	}
	
	text {
		color: #fff;
		font-size: 20rpx;
		line-height: 1.2;
	}
}

/* 换班列表 */
.exchange-list {
	height: calc(100vh - 400rpx);
	width: 100%;
	box-sizing: border-box;
}

.exchange-item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 0 30rpx 20rpx 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	width: calc(100% - 60rpx);
	box-sizing: border-box;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	width: 100%;
}

.route {
	font-size: 32rpx;
	font-weight: 500;
	color: $text-color;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 20rpx;
}

.status-tag {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	flex-shrink: 0;
	
	&.open {
		background-color: #e8f5e8;
		color: #52c41a;
	}
	
	&.pending {
		background-color: #fff7e6;
		color: #faad14;
	}
	
	&.completed {
		background-color: #f0f0f0;
		color: #999;
	}
}

.item-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	width: 100%;
	
	text {
		font-size: 28rpx;
		color: $text-color;
		flex: 1;
		text-align: center;
	}
}

.item-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.remarks {
	font-size: 26rpx;
	color: $light-text;
	flex: 1;
	margin-right: 20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stats {
	display: flex;
	gap: 20rpx;
	flex-shrink: 0;
	
	text {
		font-size: 24rpx;
		color: $light-text;
		white-space: nowrap;
	}
}

.load-more {
	text-align: center;
	padding: 40rpx;
	color: $light-text;
	font-size: 28rpx;
	width: 100%;
}

/* 滑动提示 */
.swipe-hint {
	padding: 12rpx 30rpx;
	background: linear-gradient(135deg, #6c5ce7, #a29bfe);
	text-align: center;
	animation: fadeInOut 3s ease-in-out;
	margin-top: 10rpx;
}

.hint-text {
	font-size: 22rpx;
	color: #fff;
	opacity: 0.9;
}

@keyframes fadeInOut {
	0%, 100% { opacity: 0; transform: translateY(-5rpx); }
	20%, 80% { opacity: 1; transform: translateY(0); }
}
</style> 